import React, { useEffect } from 'react'
import * as echarts from 'echarts'
import { createChartsOptions } from '../shared/create-echarts-options'
import { px } from '../px'

export const Chart4 = () => {
    const divRef = React.useRef(null)
    const myChart = React.useRef(null)
    let data = [
        { x: 0, value: 0.15 },
        { x: 2, value: 0.13 },
        { x: 4, value: 0.11 },
        { x: 6, value: 0.13 },
        { x: 8, value: 0.14 },
        { x: 10, value: 0.15 },
        { x: 12, value: 0.16 },
        { x: 14, value: 0.18 },
        { x: 16, value: 0.21 },
        { x: 18, value: 0.19 },
        { x: 20, value: 0.17 },
        { x: 22, value: 0.16 },
        { x: 24, value: 0.15 },
    ]
    let x = (data) => {
        myChart.current.setOption(createChartsOptions({
            tooltip: {
                trigger: 'item'
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: data.map(i => i.x),
                splitLine: { show: true, lineStyle: { color: '#073E78' } },
                axisTick: { show: false },
                axisLine: { show: false },
            },
            yAxis: {
                type: 'value',
                splitLine: { lineStyle: { color: '#073E78' } },
                axisLabel: {
                    formatter(val) {
                        return (val * 10).toFixed(0) + '%';
                    }
                }
            },
            series: [{
                name: '故意伤人',
                type: 'line',
                data: data.map(i => i.value),
                symbol: 'circle',
                symbolSize: px(12),
                lineStyle: { width: px(2) },
                // 多余的区域显示过度渐变
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#414a9f'
                    }, {
                        offset: 1,
                        color: '#1b1d52'
                    }]),
                }
            }]
        }));
    }
    useEffect(() => {
        setInterval(() => {
            let newData = [
                { x: 0, value: Math.random() + 1 },
                { x: 2, value: Math.random() + 1 },
                { x: 4, value: Math.random() + 1 },
                { x: 6, value: Math.random() + 1 },
                { x: 8, value: Math.random() + 1 },
                { x: 10, value: Math.random() + 1 },
                { x: 12, value: Math.random() + 1 },
                { x: 14, value: Math.random() + 1 },
                { x: 16, value: Math.random() + 1 },
                { x: 18, value: Math.random() + 1 },
                { x: 20, value: Math.random() + 1 },
                { x: 22, value: Math.random() + 1 },
                { x: 24, value: Math.random() + 1 },
            ]
            x(newData)
        }, 3000)
    }, [])
    useEffect(() => {
        myChart.current = echarts.init(divRef.current);
        x(data)
    }, []);
    return (
        <div className='bordered 案发时段'>
            <h2>案发时段分析</h2>
            <div className='chart' ref={divRef}></div>
        </div>
    )
}